<script setup lang="ts">
import { RouterView, useRoute } from 'vue-router'
import { onMounted, computed } from 'vue'
import { useAuthStore } from '@/stores/auth'

const route = useRoute()
const authStore = useAuthStore()

// 是否显示导航栏（登录和注册页面不显示）
const showNavbar = computed(() => {
  return !['login', 'register'].includes(route.name as string)
})

// 处理登出
const handleLogout = async () => {
  await authStore.logout()
}

// 初始化认证状态
onMounted(() => {
  authStore.restoreAuth()
})
</script>

<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav v-if="showNavbar && authStore.isAuthenticated" class="bg-white shadow-sm border-b border-gray-200">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-semibold text-gray-900">Vue Lab Project</h1>
          </div>
          <div class="flex items-center space-x-4">
            <span class="text-sm text-gray-700">
              欢迎，{{ authStore.user?.firstName }} {{ authStore.user?.lastName }}
              <span class="text-xs text-gray-500">({{ authStore.user?.role }})</span>
            </span>
            <button
              @click="handleLogout"
              class="text-sm text-gray-500 hover:text-gray-700 transition-colors"
            >
              登出
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容 -->
    <main :class="{ 'pt-0': !showNavbar || !authStore.isAuthenticated }">
      <RouterView />
    </main>
  </div>
</template>

<style>
#app {
  min-height: 100vh;
  background-color: #f9fafb;
}

main {
  min-height: calc(100vh - 4rem);
}

main.pt-0 {
  min-height: 100vh;
}
</style>
